<div class="main_content retrieve monitoring white_design">
  <monitoring-tabs></monitoring-tabs>
  <div class="tab-content">
    <h2 i18n="@@retrieve">Retrieve</h2>
    <div class="filter_line">
      <div class="filter_block">
        <filter-generator [schema]="filterSchema" [model]="filterObject" (submit)="onSubmit($event)" (onChange)="onFormChange($event)"></filter-generator>
        <div class="filter">
          <div class="filter_block auto_reloader">
            <table>
              <tr *ngFor="let status of Object.keys(statusValues)" [ngClass]="{'gray':statusValues[status]?.count == '0','red':statusValues[status]?.count=='!'}">
                <td>{{statusValues[status].text}}:</td>
                <td *ngIf="!statusValues[status]?.loader">{{statusValues[status]?.count}}</td>
                <td *ngIf="statusValues[status]?.loader"><i class="fa fa-circle-o-notch fa-spin dashboard_loader"></i></td>
              </tr>
            </table>

            <div class="option_block">
              <div class="interval_block">
                <label i18n="@@interval">Interval:</label>
                <input type="text" i18n-placeholder="@@placeholder.interval" placeholder="Interval" [(ngModel)]="interval">
                <span>s</span>
              </div>
              <button class="btn-default submit" (click)="toggleAutoRefresh()">
                <div class="spinnter_container">
                  <span *ngIf="!timer.started" class="glyphicon glyphicon-refresh"></span>
                  <mat-progress-spinner *ngIf="timer.started" mode="indeterminate" [diameter]="20" ></mat-progress-spinner>
                </div>
                <span *ngIf="!timer.started">{{timer.startText}}</span>
                <span *ngIf="timer.started">{{timer.stopText}}</span>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="filter_line">
      <div class="filter single_block" [permission]="{id:'action-monitoring->external_retrieve-all_action',param:'visible'}">
          <div class="filter_block">
              <div class="line">
                <div (click)="downloadCsv()" class="w45percent csv_button"><span class="custom_icon csv_icon"></span><span class="text" i18n="@@download_csv">Download CSV</span></div>
                <div (click)="uploadCsv()" class="w45percent csv_button"><span class="material-icons">file_upload</span><span class="text" i18n="@@upload_csv">Upload CSV</span></div>
              </div>
          </div>
          <div class="filter_block">
            <div class="line">
              <mat-select class="pull-left" [(ngModel)]="allAction" i18n-placeholder="@@placeholder.all_actions" placeholder="All actions" (selectionChange)="allActionChanged($event)" floatPlaceholder="never">
                <mat-option value="{{actions.value}}" *ngFor="let actions of allActionsOptions">{{actions.label}}</mat-option>
              </mat-select>
              <div class="checkbox_button" [ngClass]="{'active':batchGrouped}"><mat-checkbox [(ngModel)]="batchGrouped" (ngModelChange)="externalRetrieveEntries = []" i18n="@@batch_id_grouped">Batch ID grouped</mat-checkbox></div>
            </div>
          </div>
      </div>
    </div>
    <ng-container *ngIf="_.size(externalRetrieveEntries) > 0">
      <button class="left_arrow arrow no_style"  i18n-title="@@title.preview_page" title="Preview page" [disabled]="!hasNewer(externalRetrieveEntries)" [ngClass]="{'active':hasNewer(externalRetrieveEntries)}" (click)="getTasks(newerOffset(externalRetrieveEntries))">
        <span class="glyphicon glyphicon glyphicon-chevron-left"></span>
      </button>
      <button class="right_arrow arrow no_style" i18n-title="@@title.next_page" title="Next page" [disabled]="!hasOlder(externalRetrieveEntries)" [ngClass]="{'active':hasOlder(externalRetrieveEntries)}" (click)="getTasks(olderOffset(externalRetrieveEntries))">
        <span class="glyphicon glyphicon glyphicon-chevron-right"></span>
      </button>
    </ng-container>
    <table class="table table-bordered table-condensed" *ngIf="_.size(externalRetrieveEntries) > 0">
      <thead>
      <tr *ngIf="batchGrouped">
        <th>
        </th>
        <th width="3%"></th>
        <th i18n="@@batch_id">Batch ID</th>
        <th i18n="@@queue_name">Queue Name</th>
        <th class="hideOn1200px" i18n="@@remote_aet">Remote AET</th>
        <th class="hideOn1100px" i18n="@@destination_aet">Destination AET</th>
        <th class="hideOn1100px" i18n="@@scheduled_time_range">Scheduled Time Range</th>
        <th class="hideOn1100px" i18n="@@processing_start_time_range">Processing Start Time Range</th>
        <th class="hideOn1100px" i18n="@@processing_end_time_range">Processing End Time Range</th>
        <th class="hideOn1100px" i18n="@@tasks">Tasks</th>
      </tr>
      <tr *ngIf="!batchGrouped">
        <th>
        </th>
          <th  (mouseenter)="tableMousEnter()" (mouseleave)="tableMousLeave()">
          <div class="action_block">
            <input type="checkbox" (change)="checkAll($event)">
            <a [permission]="{id:'action-monitoring->external_retrieve-single_action',param:'visible'}" class="text-white" (click)="$event.preventDefault();executeAll('cancel')" href="" i18n-title="@@title.cancel_selected" title="Cancel selected">
              <span class="glyphicon glyphicon-ban-circle"></span>
            </a>
            <a [permission]="{id:'action-monitoring->external_retrieve-single_action',param:'visible'}" class="text-white" (click)="$event.preventDefault();executeAll('reschedule')" href="" i18n-title="@@title.reschedule_selected" title="Reschedule selected">
              <span class="glyphicon glyphicon-repeat"></span>
            </a>
            <a [permission]="{id:'action-monitoring->external_retrieve-single_action',param:'visible'}" class="text-white" (click)="$event.preventDefault();executeAll('delete')" href="" i18n-title="@@title.delete_selected" title="Delete selected">
              <span class="glyphicon glyphicon-remove-circle"></span>
            </a>
          </div>
        </th>
        <th>Status</th>
        <th i18n="@@queue_name">Queue Name</th>
        <th class="hideOn1000px" i18n="@@study_instance_uid">Study Instance UID</th>
        <th class="hideOn1200px" i18n="@@remote_aet">Remote AET</th>
        <th class="hideOn1100px" i18n="@@destination_aet">Destination AET</th>
        <th class="hideMobile hideOn800px" i18n="@@scheduled">Scheduled</th>
        <th class="hideMobile hideOn1400px" i18n="@@started">Started</th>
        <th class="hideMobile" i18n="@@finished_approx">Finished / Approx.</th>
        <th class="hideMobile hideOn1200px" i18n-title="@@title.completed_remaining_failed" title="Completed / Remaining / Failed" i18n="@@comp_rem_failed">Comp. / Rem. / Failed</th>
        <th class="hideMobile hideOn1200px" i18n="@@inst_sec">Inst. / sec</th>
      </tr>
      </thead>
      <tbody>
      <ng-container *ngFor="let match of externalRetrieveEntries">
        <tr *ngIf="batchGrouped">
          <td [attr.rowspan]="(match.showProperties ? 2 : 1)" [innerHtml]="match.offset+1+'.'"></td>
          <td  (mouseenter)="tableMousEnter()" (mouseleave)="tableMousLeave()">
            <a (click)="$event.preventDefault();match.showProperties = !match.showProperties" href="" i18n-title="@@show_properties" title="Show Properties">
              <span class="glyphicon glyphicon-list"></span>
            </a>
              <a class="text-white" (click)="$event.preventDefault();showTaskDetail(match)" href="" i18n-title="@@title.retrieve-monitoring.show_tasks_detail" title="Show tasks detail">
                  <span class="glyphicon glyphicon-list-alt"></span>
              </a>
            <a [permission]="{id:'action-monitoring->external_retrieve-single_action',param:'visible'}" (click)="$event.preventDefault();deleteBatchedTask(match)" href="" i18n-title="@@title.delete_task_with_this_batchid" title="Delete Task with this BatchID">
              <span class="glyphicon glyphicon-remove-circle"></span>
            </a>
          </td>
          <td [innerHtml]="match.properties.batchID" title="{{match.properties.batchID}}"></td>
          <td [innerHtml]="match.properties.dcmQueueName" title="{{match.properties.dcmQueueName}}"></td>
          <td [innerHtml]="match.properties.RemoteAET" class="hideOn1200px"></td>
          <td [innerHtml]="match.properties.DestinationAET" class="hideOn1100px"></td>
          <td [innerHtml]="match.properties.scheduledTimeRange" class="hideOn1100px"></td>
          <td [innerHtml]="match.properties.processingStartTimeRange" class="hideOn1100px"></td>
          <td [innerHtml]="match.properties.processingEndTimeRange" class="hideOn1100px"></td>
          <td class="hideOn1100px no-padding" width="30%"><stacked-progress [model]="match.properties.tasks"></stacked-progress></td>
        </tr>
        <tr *ngIf="!batchGrouped">
          <td [attr.rowspan]="(match.showProperties ? 2 : 1)" [innerHtml]="match.offset+1+'.'"></td>
          <td  (mouseenter)="tableMousEnter()" (mouseleave)="tableMousLeave()">
              <input type="checkbox" [(ngModel)]="match.checked">
              <a (click)="$event.preventDefault();match.showProperties = !match.showProperties" href="" i18n-title="@@show_properties" title="Show Properties">
              <span class="glyphicon glyphicon-list"></span>
            </a>
            <a [permission]="{id:'action-monitoring->external_retrieve-single_action',param:'visible'}" *ngIf="((match.properties.status && match.properties.status === 'SCHEDULED') || (match.properties.status && match.properties.status === 'IN PROCESS'))" (click)="$event.preventDefault();cancel(match)" href="" i18n-title="@@title.cancel" title="Cancel">
              <span class="glyphicon glyphicon-ban-circle"></span>
            </a>
            <a [permission]="{id:'action-monitoring->external_retrieve-single_action',param:'visible'}"  (click)="$event.preventDefault();reschedule(match)" href="" i18n-title="@@title.reschedule" title="Reschedule">
              <span class="glyphicon glyphicon-repeat"></span>
            </a>
            <a [permission]="{id:'action-monitoring->external_retrieve-single_action',param:'visible'}" (click)="$event.preventDefault();delete(match)" href="" i18n-title="@@title.delete" title="Delete">
              <span class="glyphicon glyphicon-remove-circle"></span>
            </a>
          </td>
          <td [innerHtml]="match.properties.status" title="{{match.properties.outcomeMessage}}"></td>
          <td [innerHtml]="match.properties.queue" title="{{match.properties.queue}}"></td>
          <td [innerHtml]="match.properties.StudyInstanceUID" class="hideOn1000px"></td>
          <td [innerHtml]="match.properties.RemoteAET" class="hideOn1200px"></td>
          <td [innerHtml]="match.properties.DestinationAET" class="hideOn1100px"></td>
          <td class="hideMobile hideOn800px" [innerHtml]="match.properties.scheduledTime | date:'yyyy-MM-dd HH:mm:ss'"></td>
          <td class="hideMobile hideOn1400px" [innerHtml]="match.properties.processingStartTime | date:'yyyy-MM-dd HH:mm:ss'"></td>
          <td class="text-right hideMobile" *ngIf="match.properties.processingEndTime" [innerHtml]="match.properties.processingEndTime | date:'yyyy-MM-dd HH:mm:ss'"></td>
          <td class="text-right hideMobile" *ngIf="!match.properties.processingEndTime" [innerHtml]="match.properties.approximatelyEndTime"></td>
          <td [innerHtml]="match.properties.taskState" class="text-right hideOn1200px" [ngClass]="{'failed':match.properties.failed > 0}"></td>
          <td [innerHtml]="match.properties.InstancePerSec" class="text-right hideOn1200px"></td>
        </tr>
        <tr *ngIf="match.showProperties">
          <td colspan="10">
            <table class="table table-bordered table-condensed attribute_list">
              <tr *ngFor="let key of match.propertiesAttr | getKey">
                <th [innerHtml]="key._KEY"></th>
                <td *ngIf="key._KEY === 'createdTime' || key._KEY === 'updatedTime' || key._KEY === 'scheduledTime' || key._KEY === 'processingStartTime' || key._KEY === 'processingEndTime';else nodate_content" [innerHtml]="key._VALUE | date:'yyyy-MM-dd HH:mm:ss'"></td>
                <ng-template #nodate_content>
                  <td [innerHtml]="key._VALUE"></td>
                </ng-template>
              </tr>
            </table>
          </td>
        </tr>
        <tr [hidden]="true"></tr>
      </ng-container>
      </tbody>
    </table>
  </div>
</div>